<template>
    <div class="relative">
        <h1 class="title">修改密码</h1>
        <div class="box">
            <div class="input-box">
                <p class="label fl">当前密码</p>
                <input class="input" v-model="username" type="password" placeholder="请输入当前密码">
                <p class="prompt">*密码由6-16位字符组成，其中必须包含字母和数字</p>
            </div>
            <div class="input-box">
                <p class="label fl">新密码</p>
                <input class="input" v-model="password" type="password" placeholder="请输入新密码">
            </div>
            <div class="input-box">
                <p class="label fl">确认密码</p>
                <input class="input" type="password" placeholder="请再次输入密码">
            </div>

            <button class="button" login>下一步</button>
        </div>
    </div>
</template>

<script>
  export default {
    name: "resetPassword",
    data(){
      return{
        username:'',
        password:''
      }
    }
  }
</script>

<style scoped>
    .box{
        position: absolute;
        left: 0;
        right: 0;
        top: calc((100vh - 400px)/2);
        height: 260px;
        width: 400px;
        margin: auto;
    }

    .button{
        background: #0c33f0;
        border: none;
        width: 82px;
        height: 26px;
        color: white;
        font-size: 14px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .input-box{
        width: 400px;
        margin: 10px 0;
    }

    .input-box .label{
        height: 38px;
        line-height: 38px;
        width: 95px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .input-box .input{
        height: 38px;
        width: 305px;
        font-size: 14px;
        border:solid #ededef 2px;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .input-box .input::placeholder {
        color: #8a8b90;
        font-size: 14px;
    }

    .input-box .prompt{
        color: #3353ce;
        font-weight: bold;
        padding-left: 95px;
        font-size: 12px;
        line-height: 25px;
        height: 25px;
    }
</style>
